<template>

  <div v-if="current == 2"
       class=" rounded-lg"
       :style="contStyle">
    <n-scrollbar :style="contStyle">
      <div class="p-4">
        <h2 class="text-lg font-bold">Single Column Section</h2>
        <p class="h-100">This is the single column content.</p>
        <p class="h-100">This is the single column content.</p>
        <p class="h-100">This is the single column content.</p>
        <p class="h-100">This is the single column content.</p>
        <p class="h-100">This is the single column content.</p>
      </div>
    </n-scrollbar>
  </div>

</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { NScrollbar } from "naive-ui";
import { defineProps } from "vue";
import { useAppStore, useUserStore } from "@/store";

const props = defineProps<{
  current: number;
}>();

const appStore = useAppStore();

const contStyle = computed(() => {
  let height = {};
  if (appStore.sectionHeaderShow) {
    height = {
      maxHeight: "calc(100vh - 160px)",
    };
  } else {
    height = {
      maxHeight: "calc(100vh - 80px)",
    };
  }
  console.log("style:", height);
  return height;
});
</script>